import React, { Component } from 'react';
import { ScrollView, View, StyleSheet, TextInput } from 'react-native';
import { colors } from 'bee/themes';
import { px2dp } from 'bee/utils/px2dp';
import { Attache } from 'bee/components/Attache';
import { NOTES } from 'bee/constants';
import { RadioPicker } from 'bee/components/MakePlan';
import { PrimaryBtn } from 'bee/components/Buttons';
import DutyItem from './DutyItem';
import { InputWithTitle, NormalText, SubText } from './InputWithTitle';
import UploadWithTitle from './UploadWithTitle';

export default class InsuredToInform extends Component {
  constructor() {
    super();

    this.state = {
      hasContract: false,
      contractDetails: '',
      otherWay: false,
      otherWayDetails: '',
      canceled: false,
      canceledDetails: '',
      abnormal: false,
      abnormalDetails: '',
      height: '',
      weight: '',
      annualIncome: '',
      sourceType: '',
      sourceContent: '',
      otherSource: '',
      hasCase: false,
      hasReport: false,
      hasFinancial: false,
      patientData: [],
      report: [],
      financial: [],
    };
  }

  render() {
    const {
      hasContract,
      contractDetails,
      otherWay,
      otherWayDetails,
      abnormal,
      abnormalDetails,
      canceled,
      canceledDetails,
      otherSource,
    } = this.state;

    return (
      <ScrollView style={styles.container}>
        <Attache />
        <DutyItem
          title={NOTES.titles[0]}
          text={NOTES.item1}
          hasSubText={NOTES.subText}
          selected={hasContract}
          details={contractDetails}
          changeDetails={value => {
            this.setState({ contractDetails: value });
          }}
          changeSelected={value => {
            this.setState({ hasContract: value });
          }}
        />
        <DutyItem
          text={NOTES.item2}
          selected={otherWay}
          details={otherWayDetails}
          changeSelected={value => {
            this.setState({ otherWay: value });
          }}
          changeDetails={value => {
            this.setState({ otherWayDetails: value });
          }}
        />
        <DutyItem
          text={NOTES.item3}
          selected={canceled}
          details={canceledDetails}
          changeSelected={value => {
            this.setState({ canceled: value });
          }}
          changeDetails={value => {
            this.setState({ canceledDetails: value });
          }}
        />
        <DutyItem
          text={NOTES.item4}
          selected={abnormal}
          details={abnormalDetails}
          changeSelected={value => {
            this.setState({ abnormal: value });
          }}
          changeDetails={value => {
            this.setState({ abnormalDetails: value });
          }}
        />
        <DutyItem text={NOTES.item5}>
          <View style={styles.item6Chilldren}>
            <InputWithTitle
              title={NOTES.height}
              unit={NOTES.cm}
              value={this.state.height}
              onValueChange={value => {
                this.setState({ height: value });
              }}
            />
            <InputWithTitle
              title={NOTES.weight}
              unit={NOTES.kg}
              value={this.state.weight}
              onValueChange={value => {
                this.setState({ weight: value });
              }}
            />
          </View>
        </DutyItem>
        <DutyItem
          text={NOTES.item6}
          headerRight={
            <InputWithTitle
              unit={NOTES.wanYuan}
              value={this.state.annualIncome}
              onValueChange={value => {
                this.setState({ annualIncome: value });
              }}
            />
          }
        >
          <View style={styles.item6Chilldren}>
            <NormalText text={NOTES.revenueSource} />
            <View style={styles.sourceView}>
              {['工资', '私营', '务农', '其他'].map((value, index) => (
                <RadioPicker
                  key={index}
                  index={index}
                  value={value}
                  isSelected={this.state.sourceType === index}
                  onPress={() => {
                    if (index === 3)
                      this.setState({
                        sourceType: index,
                        sourceContent: this.state.otherSource,
                      });
                    this.setState({ sourceType: index, sourceContent: value });
                  }}
                />
              ))}
              {this.state.sourceType === 3 && (
                <TextInput
                  style={{ width: '100%' }}
                  value={otherSource === '其他' && otherSource}
                  placeholder={NOTES.enterOther}
                  underlineColorAndroid="transparent"
                  onChangeText={value => {
                    this.setState({ sourceContent: value });
                  }}
                />
              )}
            </View>
          </View>
        </DutyItem>
        <DutyItem title={NOTES.titles[1]}>
          <View style={styles.uploadView}>
            <SubText text={NOTES.uploadNotes} />
            <View>
              <UploadWithTitle
                title={NOTES.caseHistory}
                isChecked={this.state.hasCase}
                onClick={() => {
                  this.setState({ hasCase: !this.state.hasCase });
                }}
              />
              <UploadWithTitle
                title={NOTES.report}
                isChecked={this.state.hasReport}
                onClick={() => {
                  this.setState({ hasReport: !this.state.hasReport });
                }}
              />
              <UploadWithTitle
                title={NOTES.caseHistory}
                isChecked={this.state.hasFinancial}
                onClick={() => {
                  this.setState({ hasFinancial: !this.state.hasFinancial });
                }}
              />
            </View>
          </View>
        </DutyItem>

        <View style={{ marginTop: px2dp(64) }}>
          <PrimaryBtn text={NOTES.confirm} />
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.white,
  },
  item6Chilldren: {
    flexDirection: 'row',
    paddingLeft: px2dp(24),
    paddingRight: px2dp(18),
    marginTop: px2dp(30),
  },
  sourceView: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignContent: 'flex-start',
    marginLeft: px2dp(35),
  },
  uploadView: {
    paddingLeft: px2dp(24),
    paddingRight: px2dp(18),
  },
});
